<template>
	<view class="topbar">
		<StatusTopBar></StatusTopBar>
	</view>
	<view class="container">
		<view class="header">
			<text class="title">今日天气</text>
			<text>{{fmtDate(new Date(),'YYYY/MM/DD dddd')}}</text>
		</view>
		<!-- 天气概况 -->
		<view class="weather-header">
			<view class="location">
				<uni-icons type="location-filled" size="48rpx" color="#d502ff" />
				<text class="city">{{ weather.location?.name }}, {{ weather.location?.adm2 }}, {{ weather.location?.adm1
				}}</text>
				<text class="updateTime">{{ '更新于' + fmtDate(weather.updateTime, 'HH:mm') }}</text>
				<text>&nbsp;</text>
				<uni-icons type="refresh" size="48rpx" color="#d502ff" class="refresh-icon" @click="handleRefresh" />
			</view>
			<view class="temperature">
				<view class="now-weather-icon">
					<image class="iconfont" :class="`qi-${weather.now?.icon}`" />
				</view>

				<text class="temp-value">{{ weather.now?.temp }}°</text>
			</view>
			<view class="weather-meta">
				<text class="weather-desc">{{ weather.now?.text }}</text>
				<view class="air-quality">
					<text class="aqi">空气质量 {{ weather.aqi?.category }}</text>
					<text class="aqi-value">AQI {{ weather.aqi?.aqi }}</text>
				</view>
			</view>
		</view>

		<!-- 24小时天气预报 -->
		<scroll-view class="hourly-forecast" scroll-x>
			<view class="hourly-list">
				<view v-for="(item, index) in weather.hourlyData" :key="index" class="hourly-item">
					<text class="hour">{{ formatHour(item.fxTime) }}</text>
					<image class="weather-icon iconfont" :class="`qi-${item.icon}`" />
					<text class="temp">{{ item.temp }}°</text>
				</view>
			</view>
		</scroll-view>

		<!-- 一周天气预报 -->
		<view class="weekly-forecast">
			<view class="card-title">未来七天</view>
			<view v-for="(item, index) in weather.dailyData" :key="index" class="daily-item">
				<text class="day">{{ fmtDate(item.fxDate, 'MM-DD') }}</text>
				<image class="weather-icon iconfont" :class="`qi-${item.iconDay}`" />
				<text>&nbsp;</text>
				<text class="day">{{ formatDailyText(item.textDay, item.textNight) }}</text>
				<view class="temp-range">
					<text>{{ item.tempMin }}°</text>
					<text class="separator">/</text>
					<text>{{ item.tempMax }}°</text>
				</view>
			</view>
		</view>

		<!-- 详细气象信息 -->
		<view class="weather-details">
			<view class="detail-grid">
				<view v-for="(item, index) in weather.detailsData" :key="index" class="detail-item">
					<uni-icons fontFamily="iconfont" size="48rpx" color="#d502ff">{{ item.icon
					}}</uni-icons>
					<view class="detail-info">
						<text class="detail-label">{{ item.label }}</text>
						<text class="detail-value">{{ item.value }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>
<script lang="ts" setup>
	import { onMounted } from 'vue'
	import { useWeatherStore } from '@/stores/useWeatherStore'
	import { fmtDate } from '@/common/utils'
	import { onShow } from '@dcloudio/uni-app'

	const weather = useWeatherStore()

	const formatHour = (timeString : string) => {
		let dt = new Date(timeString)
		let hour = dt.getHours()
		return `${hour.toString().padStart(2, '0')}:00`
	}

	const formatDailyText = (textDay : string, textNight : string) => {
		return textDay !== textNight ? `${textDay}转${textNight}` : textDay
	}

	// 定时刷新
	let timer : number | undefined
	onMounted(() => {
		weather.init();
	})

	onShow(() => {
		if (!weather.updateTime) return;
		const lastUpdated = new Date(weather.updateTime).getTime();
		if (Date.now() - lastUpdated > 60 * 60 * 1000) weather.init();
	})

	// 手动刷新
	const handleRefresh = () => {
		weather.init();
	}
</script>

<style scoped>
	@import '@/static/qweather-icons/font/qweather-icons.css';

	.container {
		/* height: 100%; */
		padding: 32rpx;
		padding-top: 0;
		display: flex;
		flex-direction: column;
		gap: 32rpx;
		background: linear-gradient(135deg, #0B0B2B 0%, #1A1A4B 100%);
		color: #FFFFFF;
	}

	.topbar {
		position: sticky;
		top: 0;
		/* margin-bottom: 10rpx;*/
		background: rgba(11, 11, 43, 0.85);
		z-index: 999;
	}

	.header {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		/* background-color: #282828; */
		background: rgba(11, 11, 43, 0.85);
		backdrop-filter: blur(10px);
		flex-shrink: 0;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.weather-header {
		/* background: rgba(40, 40, 40, 0.8); */
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 32rpx;
		padding: 32rpx;
	}

	.location {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.city {
		color: #FFFFFF;
		font-size: 32rpx;
		margin-left: 12rpx;
		flex: 1;
	}

	.updateTime {
		color: #999;
		font-size: 26rpx;
	}

	.refresh-icon {
		margin-left: auto;
	}

	.current-weather {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.temperature {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		gap: 16rpx;
		/* 图标与文字之间的间距 */
	}

	.now-weather-icon {
		/* width: 72rpx;
	height: 72rpx; */
	}

	.now-weather-icon image {
		color: #d502ff;
		font-size: 80rpx;
		width: auto;
		height: auto;
	}

	.temp-value {
		color: #FFFFFF;
		font-size: 80rpx;
		font-weight: bold;
		line-height: 1;
	}

	.weather-meta {
		margin-top: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 30rpx;
	}

	.weather-desc {
		color: #B3B3B3;
		font-size: 32rpx;
		margin-top: 8rpx;
	}

	.air-quality {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.aqi {
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.aqi-value {
		color: #B3B3B3;
		font-size: 28rpx;
		margin-top: 8rpx;
	}

	.hourly-forecast {
		/* background: rgba(40, 40, 40, 0.8); */
		background-color: rgba(255, 255, 255, 0.1);

		border-radius: 32rpx;
		padding: 32rpx 0;
		/* 左右padding设为0，避免内容超出 */
		width: 100%;
		overflow: hidden;
		/* 防止内容溢出 */
		box-sizing: border-box;
	}

	.hourly-list {
		display: flex;
		gap: 48rpx;
		min-width: max-content;
		/* 让内容宽度自适应，超出可滑动 */
		padding: 0 32rpx;
		/* 内边距交给内容容器 */
		box-sizing: border-box;
	}

	.hourly-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
	}

	.hour {
		color: #B3B3B3;
		font-size: 28rpx;
	}

	.temp {
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.weekly-forecast {
		/* background: rgba(40, 40, 40, 0.8); */
		background-color: rgba(255, 255, 255, 0.1);

		border-radius: 32rpx;
		padding: 32rpx;
	}

	.card-title {
		color: #FFFFFF;
		font-size: 32rpx;
		margin-bottom: 24rpx;
	}

	.daily-item {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1px solid rgba(179, 179, 179, 0.1);
	}

	.daily-item:last-child {
		border-bottom: none;
	}

	.day {
		color: #FFFFFF;
		font-size: 28rpx;
		width: 200rpx;
	}

	.temp-range {
		margin-left: auto;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.separator {
		margin: 0 8rpx;
		color: #B3B3B3;
	}

	.weather-details {
		/* background: rgba(40, 40, 40, 0.8); */
		background-color: rgba(255, 255, 255, 0.1);

		border-radius: 32rpx;
		padding: 32rpx;
	}

	.detail-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.detail-info {
		display: flex;
		flex-direction: column;
	}

	.detail-label {
		color: #B3B3B3;
		font-size: 28rpx;
	}

	.detail-value {
		color: #FFFFFF;
		font-size: 28rpx;
		margin-top: 4rpx;
	}


	.weather-icon {
		/* width: 48rpx;
	height: 48rpx; */
		width: auto;
		height: auto;
		font-size: 50rpx;
		color: #d502ff;
	}
</style>